<div class="wrapper">
    <div class="abs-center width-lg">
        <div class="text-center mb-lg mt-lg">
            <div class="mb-lg">
                <em class="fa fa-wrench fa-5x text-grey"></em>
            </div>
            <div class="text-lg mb-lg">500</div>
            <p class="lead m0">Oh! Something went wrong :(</p>
            <p>Don't worry, we're now checking this.</p>
            <p>In the meantime, please try one of those links below or come back in a moment</p>
        </div>
        <nz-breadcrumb nzSeparator="|" class="ant-breadcrumb__last-item-no-bold text-center">
            <nz-breadcrumb-item>
                <a class="text-muted" [routerLink]="'/home'">Go to App</a>
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a class="text-muted" [routerLink]="'/login'">Login</a>
            </nz-breadcrumb-item>
            <nz-breadcrumb-item>
                <a class="text-muted" [routerLink]="'/register'">Register</a>
            </nz-breadcrumb-item>
        </nz-breadcrumb>
        <div class="p-lg text-center text-sm">
            &copy; {{ settings.app.year }} - {{ settings.app.name }}
            <br> {{ settings.app.description }}
        </div>
    </div>
</div>
